<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>simulated bubble event example</title>
    <script src="/kissy/build/seed-debug.js" charset="utf-8"></script>
    <script src="/kissy/src/package.js"></script>
    <style type="text/css">
        body, html {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id='t' style="width:500px;margin:20px auto;line-height: 2;">
    <h1>bubble event manual test</h1>

    <form action="http://www.g.cn">
        <label>
            <input id='inp'/></label>
        <br/>
        <label>
            <input type='checkbox' id='checkb'/></label>
        <br/>
        <input type="submit"/>
        <br/>
    </form>
    <button id='r'>remove bubble</button>
</div>
<script>
    var S = KISSY;

    KISSY.use("dom,event/dom", function (S, Dom, Event) {

        Event.on("#checkb", "change", function () {
            alert("checkbox changed");
        });

        Event.on("#inp", "change", function () {
            alert("input changed");
        });

        Event.on("#t", "change", function (e) {
            alert(e.target.type + " changed by bubble");
        });

        Event.on("#t", "submit", function (e) {
            alert(e.target.nodeName + " submitted by bubble");
            e.preventDefault();
        });

        Event.on("#r", "click", function () {
            Event.remove("#t");
        });
    });

</script>
</body>
</html>